<template>
  <div>
    <van-cell-group class="vcg" inset v-for="(helpArticle,index) in helpArray">
      <van-panel :title="helpArticle.helpTitle">
        <router-link :to="{
          path: '/homeview/help/helppage/helpdetails',
          query: {
            helpId: helpArticle.helpId,
            userId: helpArticle.userId,
            moduleId: helpArticle.moduleId,
            url: helpArticle.moduleId<2000 ? imagesSchool[(helpArticle.moduleId)%7].url[(index+1)%(imagesSchool[(helpArticle.moduleId)%7].url.length)] : imagesCountry[(helpArticle.moduleId)%3].url[(index+1)%(imagesCountry[(helpArticle.moduleId)%3].url.length)] ,
          }
        }">
          <van-icon name="arrow" style="float: right"  />
        </router-link>
        <div style="padding-left: 16px">
          <p style="margin: 6px auto">
            <van-image
              round
              width="1.5rem"
              height="1.5rem"
              :src="helpArticle.userInfo.avatar"
            />
            <span style="font-size: 20px; vertical-align: top">{{
              helpArticle.userInfo.nickname
            }}</span>
          </p>
        </div>
        <div style="padding-left: 16px" class="van-multi-ellipsis--l2">
          {{ helpArticle.helpContent }}
          <div style="display: flex; height: 200px; width: 200px">
            <img :src="helpArticle.moduleId<2000 ? imagesSchool[(helpArticle.moduleId)%7].url[(index+1)%(imagesSchool[(helpArticle.moduleId)%7].url.length)] : imagesCountry[(helpArticle.moduleId)%3].url[(index+1)%(imagesCountry[(helpArticle.moduleId)%3].url.length)] " />
          </div>
        </div>
        <template #footer>
          <p style="margin: 6px 0 auto">时间: {{ helpArticle.startTime}}—{{ helpArticle.endTime}}</p>
          <p style="margin: 6px 0 auto">
            难度:
            <van-rate v-model="helpArticle.difficulty" readonly />
          </p>
          <p style="margin: 6px 0 auto">
            <span style="padding-right: 10px"
              >报酬: {{ helpArticle.rewardValue }}</span
            >
            |
            <span style="padding-left: 10px"
              >报酬类型: {{ helpArticle.rewardType }}</span
            >
          </p>
        </template>
      </van-panel>
    </van-cell-group>


<!--    <van-pagination
      class="vp"
      v-model="currentPage"
      :total-items="50"
      :show-page-size="5"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>-->
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "HelpPage",
  data() {
    return {
      HelpPage: [
        {
          id: 0,
          title: "题目",
          content:
            "Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。",
          period: "2022/7/25 8:00--2023/7/25 8:00",
          difficulty: "2",
          url: "https://s1.328888.xyz/2022/08/05/uNr20.jpg",
          nickName: "吕易",
          avatar: "https://s1.328888.xyz/2022/08/05/uNr20.jpg",
          rewardValue: "20",
          rewardType: "积分",
        },
        {
          id: 0,
          title: "题目",
          content:
            "Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。",
          period: "2022/7/25 8:00--2023/7/25 8:00",
          difficulty: "2",
          url: "https://s1.328888.xyz/2022/09/05/1xJ4U.png",
          nickName: "吕易",
          avatar: "https://s1.328888.xyz/2022/09/05/1xJ4U.png",
          rewardValue: "20",
          rewardType: "积分",
        },
        {
          id: 0,
          title: "题目",
          content:
            "Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。",
          period: "2022/7/25 8:00--2023/7/25 8:00",
          difficulty: "2",
          url: "https://img01.yzcdn.cn/vant/cat.jpeg",
          nickName: "吕易",
          avatar: "https://img01.yzcdn.cn/vant/cat.jpeg",
          rewardValue: "20",
          rewardType: "积分",
        },
        {
          id: 0,
          title: "题目",
          content:
            "Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。",
          period: "2022/7/25 8:00--2023/7/25 8:00",
          difficulty: "2",
          url: "https://s1.328888.xyz/2022/09/05/1xgby.png",
          nickName: "吕易",
          avatar: "https://s1.328888.xyz/2022/09/05/1xgby.png",
          rewardValue: "20",
          rewardType: "积分",
        },
        {
          id: 0,
          title: "题目",
          content:
            "Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。",
          period: "2022/7/25 8:00--2023/7/25 8:00",
          difficulty: "2",
          url: "https://s1.328888.xyz/2022/09/05/1xPvN.png",
          nickName: "吕易",
          avatar: "https://s1.328888.xyz/2022/09/05/1xPvN.png",
          rewardValue: "20",
          rewardType: "积分",
        },
      ],
      value: 2,
      currentPage: 1,
      imagesSchool: [

        {
          id: 1001, url: [
            "https://s1.328888.xyz/2022/09/24/V6drs.jpg",
            "https://s1.328888.xyz/2022/09/24/VTED0.jpg",
            "https://s1.328888.xyz/2022/09/24/VTL1p.jpg",
            "https://s1.328888.xyz/2022/09/24/VTNyo.jpg",
            "https://s1.328888.xyz/2022/09/24/VTlvF.jpg",
            "https://s1.328888.xyz/2022/09/24/VTDbS.jpg",
            "https://s1.328888.xyz/2022/09/24/VTFg5.jpg",
            "https://s1.328888.xyz/2022/09/24/VTOAN.jpg",
            "https://s1.328888.xyz/2022/09/24/VTu4y.jpg",
            "https://s1.328888.xyz/2022/09/24/VT0IC.jpg",]
        },
        {
          id: 1002, url: [
            "https://s1.328888.xyz/2022/09/24/VTww6.jpg",
            "https://s1.328888.xyz/2022/09/24/VTGgX.jpg",
            "https://s1.328888.xyz/2022/09/24/VTCAI.jpg",
            "https://s1.328888.xyz/2022/09/24/VTk6j.png",
            "https://s1.328888.xyz/2022/09/24/VT1Ir.jpg",
            "https://s1.328888.xyz/2022/09/24/VT5HK.jpg",
            "https://s1.328888.xyz/2022/09/24/VTKFm.jpg",
            "https://s1.328888.xyz/2022/09/24/VTc57.png",
            "https://s1.328888.xyz/2022/09/24/VTozk.jpg",
            "https://s1.328888.xyz/2022/09/24/VTIEE.jpg",]
        },
        {
          id: 1003, url: [
            "https://s1.328888.xyz/2022/09/24/VTVwJ.jpg",
            "https://s1.328888.xyz/2022/09/24/VTs8w.jpg",
            "https://s1.328888.xyz/2022/09/24/VTMAi.jpg",
            "https://s1.328888.xyz/2022/09/24/VT8Hn.jpg",
            "https://s1.328888.xyz/2022/09/24/VTxFs.jpg",
            "https://s1.328888.xyz/2022/09/24/VTJ90.jpg",
            "https://s1.328888.xyz/2022/09/24/VTtzp.jpg",
            "https://s1.328888.xyz/2022/09/24/VTzEo.jpg",
            "https://s1.328888.xyz/2022/09/24/VT7GF.jpg",
            "https://s1.328888.xyz/2022/09/24/VTQ8S.jpg",
          ]
        },
        {
          id: 1004, url: [
            "https://s1.328888.xyz/2022/09/24/VBwwo.jpg",
            "https://s1.328888.xyz/2022/09/24/VTn7B.jpg",
            "https://s1.328888.xyz/2022/09/24/VTY9U.jpg",
            "https://s1.328888.xyz/2022/09/24/VTRER.jpg",
            "https://s1.328888.xyz/2022/09/24/VTZGP.jpg",
            "https://s1.328888.xyz/2022/09/24/VTvTI.jpg",
            "https://s1.328888.xyz/2022/09/24/VTiU6.jpg",
            "https://s1.328888.xyz/2022/09/24/VhLpr.jpg",
            "https://s1.328888.xyz/2022/09/24/VhEsj.jpg",
            "https://s1.328888.xyz/2022/09/24/VhlOK.jpg",
          ]
        },
        {
          id: 1005, url: [
            "https://s1.328888.xyz/2022/09/24/VhmKm.jpg",
            "https://s1.328888.xyz/2022/09/24/VhD77.jpg",
            "https://s1.328888.xyz/2022/09/24/VhOLk.jpg",
            "https://s1.328888.xyz/2022/09/24/VhuUJ.jpg",
            "https://s1.328888.xyz/2022/09/24/VhjCE.jpg",
            "https://s1.328888.xyz/2022/09/24/Vh0Zw.jpg",
            "https://s1.328888.xyz/2022/09/24/VhTsg.jpg",
            "https://s1.328888.xyz/2022/09/24/Vh6Ti.jpg",
            "https://s1.328888.xyz/2022/09/24/Vhhqh.jpg",
            "https://s1.328888.xyz/2022/09/24/VhBOn.jpg",
          ]
        },
        {
          id: 1006, url: [
            "https://s1.328888.xyz/2022/09/24/VhCLp.png",
            "https://s1.328888.xyz/2022/09/24/Vh1ZS.jpg",
            "https://s1.328888.xyz/2022/09/24/VhaCo.jpg",
            "https://s1.328888.xyz/2022/09/24/VhkxF.png",
            "https://s1.328888.xyz/2022/09/24/Vhcqy.jpg",
            "https://s1.328888.xyz/2022/09/24/Vh9h5.png",
            "https://s1.328888.xyz/2022/09/24/VhKMN.png",
            "https://s1.328888.xyz/2022/09/24/VhIKd.jpg",
            "https://s1.328888.xyz/2022/09/24/Vh2jC.png",
            "https://s1.328888.xyz/2022/09/24/VhVQU.png",
          ]
        },
        {
          id: 1007, url: [
            "https://s1.328888.xyz/2022/09/05/1xVDF.png",
            "https://s1.328888.xyz/2022/09/05/1xs1S.png",
            "https://s1.328888.xyz/2022/09/05/1xMy5.png",
            "https://s1.328888.xyz/2022/09/05/1xMy5.png",
            "https://s1.328888.xyz/2022/09/05/1xgby.png",
            "https://s1.328888.xyz/2022/09/05/1xJ4U.png",
            "https://s1.328888.xyz/2022/09/06/5hYyj.jpg",
            "https://s1.328888.xyz/2022/09/06/5hX1I.jpg"
          ]
        }
      ],
      imagesCountry: [
        {
          id: 2001, url: [
            "https://s1.328888.xyz/2022/09/24/VhPCR.jpg",
            "https://s1.328888.xyz/2022/09/24/VhfxP.jpg",
            "https://s1.328888.xyz/2022/09/24/V3RnX.jpg",
            "https://s1.328888.xyz/2022/09/24/V3i4I.jpg",
            "https://s1.328888.xyz/2022/09/24/V3WIj.jpg",
            "https://s1.328888.xyz/2022/09/24/V3drr.jpg",
            "https://s1.328888.xyz/2022/09/24/VBEDK.jpg",
            "https://s1.328888.xyz/2022/09/24/VBL5m.jpg",
            "https://s1.328888.xyz/2022/09/24/VBNy7.jpg",
            "https://s1.328888.xyz/2022/09/24/VBlvk.jpg",]
        },
        {
          id: 2002, url: [
            "https://s1.328888.xyz/2022/09/24/VBDwE.jpg",
            "https://s1.328888.xyz/2022/09/24/VBFgJ.jpg",
            "https://s1.328888.xyz/2022/09/24/VBOAw.jpg",
            "https://s1.328888.xyz/2022/09/24/VBu4i.jpg",
            "https://s1.328888.xyz/2022/09/24/VB0Ig.jpg",
            "https://s1.328888.xyz/2022/09/24/VB4Hh.jpg",
            "https://s1.328888.xyz/2022/09/24/VBh5s.jpg",
            "https://s1.328888.xyz/2022/09/24/VBTDn.jpg",
            "https://s1.328888.xyz/2022/09/24/VB3z0.jpg",
            "https://s1.328888.xyz/2022/09/24/VBBvp.jpg",]
        },
        {
          id: 2003, url: [
            "https://s1.328888.xyz/2022/09/06/5hIBs.jpg",
            "https://s1.328888.xyz/2022/09/06/5hoWn.jpg",
            "https://s1.328888.xyz/2022/09/06/5hcth.jpg",
            "https://s1.328888.xyz/2022/09/06/5hKkg.jpg",
            "https://s1.328888.xyz/2022/09/06/5h9li.jpg",
            "https://s1.328888.xyz/2022/09/06/5hkoJ.jpg",
            "https://s1.328888.xyz/2022/09/06/5ha0E.jpg",
            "https://s1.328888.xyz/2022/09/06/5h1ew.jpg"
          ]
        },
      ]
    };
  },
  computed: {
    ...mapState(['helpArray'])
  },
  methods: {

  },
};
</script>

<style scoped>
.vcg {
  margin-bottom: 20px;
}

.vp {
  width: 300px;
  float: right;
}

.van-cell {
  font-size: 18px;
}
</style>